<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="大学生就业实训,品质就业,职业规划,IT行业人才基地" />
		<title>蜗牛书城(woniuxy.com)-正品低价、品质保障、配送及时、轻松购物！</title>

		<!-- 引入Bootstrap核心样式文件 -->
		<link th:href="@{/bootstrap-3.4.1/css/bootstrap.min.css}" rel="stylesheet">
		<!-- 引入jQuery核心js文件 -->
		<script th:src="@{/javascript/jQuery-1.12.4.js}"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script th:src="@{/bootstrap-3.4.1/js/bootstrap.min.js}"></script>


		<link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon" />
		<link th:href="@{/css/common.css}" rel="stylesheet" />
		<link th:href="@{/css/top.css}" rel="stylesheet" />
		<link th:href="@{/css/foot.css}" rel="stylesheet" />

		<link th:href="@{/css/book-detail.css}" rel="stylesheet" />
		<script th:src="@{/javascript/book-detail.js}"></script>

		
	</head>

	<body>
		<!--  最顶部的导航栏 -->
		<div th:replace="~{common::top}"></div>
		<!--  =================== head =============================== -->
		<div class="head">
			<div class="container">
				<!-- ============= logo ============= -->
				<div class="logo fl">
					<h1>
						<a class="hot-word">蜗牛学苑</a>
					</h1>
				</div>
				<!-- ============= 搜索框部份 ============= -->
				<div class="search fl ml100">
					<div class="up">
						<div class="search-box fl mr18">
							<input class="fl" type="text" value="请输入搜索关键字" />
							<span class="photo">&#xe663;</span>
							<span class="search-icon fl">&#xe660;</span>
						</div>

						<div class="cart fl">
							<span class="iconfont">&#xe622;</span>
							<a href="/cart/showCart">我的购物车</a>
							<i class="num">0</i>
						</div>
					</div>

					<div class="navitems">
						<ol>
							<li><a class="red-and-weight" href="#">秒杀</a></li>
							<li><a class="red-and-weight" href="#">优惠券</a></li>
							<li><a href="#">程序设计</a></li>
							<li><a href="#">数据库</a></li>
							<li><a href="#">网络与数据通信</a></li>
							<li><a href="#">科普读物</a></li>
							<li><a href="#">建筑学</a></li>
						</ol>
					</div>

				</div>
			</div>
		</div>
		
		<!-- =========================== 书本详情页面 =============================== -->

		<div class="container no-padding book-detail-bg">
		</div>

		<div class="index mt50">
			<div class="container no-padding">
				<a href="index.html">首 页</a>
			</div>
		</div>

		<!-- 书本详情 -->
		<div class="container no-padding">
			<div class="book-img fl">
				<img th:src="@{|http://192.168.146.10:8099${bookInfoById.bookImg}|}" alt="">
			</div>

			<div class="book-info fl">
				<p id="bookName" class="book-name">JAVA核心技术卷I</p>
				<p class="book-price mt50">价格 :<font color="red">￥</font><span th:text="${bookInfoById.bookPrice}"></span> </p>
				<p id="bookCollect" class="book-collect mt50">收藏 : <span th:text="${bookInfoById.bookCollectionCount}"></span></p>

				<div class="book-count mt50 form-inline">
						购买数量 :
					<div class="input-group">
						<span class="input-group-addon glyphicon glyphicon-minus"></span>
						<input type="text" class="form-control" maxlength="3" value="1" id="buyCount">
						<span class="input-group-addon glyphicon glyphicon-plus"></span>
					</div>
						库存量 : <span th:text="${bookInfoById.bookStoreCount}"></span>
				</div>

				<div class="btn-box mt50">
					<a th:onclick="addToCart([[${bookInfoById.id}]])">添加购物车</a>
					<a>立即购买</a>
				</div>

			</div>
		</div>

		<!-- =============== 最后的网站底部 =============== -->
		<div th:replace="~{common::footer}"></div>
	</body>

<script>
	function addToCart(bookId) {
		//添加进购物车不进行页面跳转,只是对数据进行增减，用ajax请求
		$.ajax({
			type: "post",
			url: "/cart/addToCart",
			data: {
				"bookId": bookId,
				"buyCount": $("#buyCount").val(),
			},
			success: function (json) {
				if (json.data === 1) {
					alert("添加购物成功");
				} else {
					alert("添加购物失败");
				}
			}
		})
	}
	

	</script>
</html>
